<script setup lang="ts">
import { ref } from 'vue'
import ImageAside from '@/components/image/ImageAside.vue'
import ImageMain from '@/components/image/ImageMain.vue'

const dialogVisible = ref(false)
const handleOpen = () => {
  dialogVisible.value = true
}

const ImageAsideRef = ref(null)
const ImageMainRef = ref(null)

// 切换分类后加载图片
function handleAsideChange(class_id: number) {
  ImageMainRef.value?.loadData(class_id)
}

const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: () => []
  }
})
const emit = defineEmits(['update:modelValue'])
// 选择图片
let urls = []
const handleSubmit = () => {
  if (urls.length) {
    emit('update:modelValue', urls[0])
  }
  dialogVisible.value = false
}
// 接收选中的图片
const handleChoose = (item: any) => {
  urls = item.map((item) => item.url)
}
</script>

<template>
  <div @click="handleOpen">
    <div v-if="modelValue">
      <el-image :src="modelValue" fit="cover" class="image" />
    </div>
    <div class="btn" v-else>
      <el-icon :size="25" color="#999"><Plus /></el-icon>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="选择图片" width="80%" top="5vh" center>
    <el-container class="body-container" style="height: 70vh">
      <el-container>
        <ImageAside ref="ImageAsideRef" @change="handleAsideChange"></ImageAside>
        <ImageMain ref="ImageMainRef" openChoose @choose="handleChoose" />
      </el-container>
    </el-container>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.image {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}
.btn {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  &:hover {
    background-color: #eee;
  }
}
.body-container {
  background-color: #fff;
  border-radius: 5px;
  margin: 10px 20px;
  .image-header {
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
  }
}
</style>
